<template>
  <div class="category-content clearfix">
    <div :key="item.name" class="category-item"  v-for="item in items" @click="cate">
      <img class="item-icon" :src=item.url />
      <p class="item-name">{{item.name}}</p>
    </div>
  </div>
</template>

<script>
  //首页目录
  export default {
    name: 'HomeCategory',
    props:['items'],
    computed: {

    },
    methods:{
      cate(){
        this.$router.push('cate')
      }

    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .category-content {
    padding-bottom: 0.2rem;
    .category-item {
      float: left;
      width: 25%;
      padding-top: 0.28rem;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .item-icon {
      width:0.96rem;
    }
    .item-name {
      margin-top: 0.28rem;
    }
  }
</style>
